<template>
  <div id="index">
    <Header class="header"></Header>
    <Slideshow class="slideshow"></Slideshow>
    <!-- <p>woshinidie</p> -->
    <div class="context">
      <OtherLink/>
      <Promotion/>
      <Recommendation/>
      <New/>
    </div>
    <Footer></Footer>
    <BackToTop :top="400"/>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Slideshow from "../components/Slideshow.vue";
import OtherLink from '../components/OtherLink.vue';
import BackToTop from '../components/BackToTop.vue';
import Promotion from '../components/Promotion.vue';
import Footer from "../components/Footer.vue";
import Recommendation from "../components/Recommendation.vue";
import New from '../components/New.vue'

export default {
  name: "Index",
  data() {
    return {};
  },
  components: {
    Header,
    Slideshow,
    OtherLink,
    BackToTop,
    Promotion,
    Footer,
    Recommendation,
    New
  },
};
</script>

<style lang="less" scoped>

.header{
  position: relative;
  z-index: 10;
}
.slideshow{
  z-index: 0;
}
.context{
  width: 100%;
  box-sizing: border-box;
  padding: 0 50px;
}

@media screen and(max-width: 400px) {
  .context{
  padding: 0 10px;
}
}
</style>